<template>
	<view class="performance_fill">
		<xbd-pages-content title="绩效填报">
			<template #content>
				<view class="content"  :style="'minHeight:'+windowHeight+'px'">
					<view class="fill_add">
						<view class="add" @click="addFill">
							<image class="add_image" src="../../static/images/performance/add.png" mode=""></image>
							新增填报
						</view>
					</view>
					
					<uni-swipe-action>
						<view class="fill_card">
							<uni-swipe-action-item v-for="item in showList" :key="item._id">
							    <xbd-fill-list @clickFillListCard="fillDetails(item._id)" :myInfo='item'></xbd-fill-list>
							    <template v-slot:right>
							        <view class="swipe_right" @click="clickDel(item._id)"><image class="swipe_image" src="../../static/images/performance/del.png" mode=""></image></view>
							    </template>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
					<view class="NoFill" v-if="showList.length === 0">
						<image  class="image" src="../../static/images/performance/fillNoImage.png" mode=""></image>
						<view class="">
							暂无填报
						</view>
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel"
						content="确认删除？" cancelText="取消" confirmText="确定">
					</xbd-popup>
					<xbd-popup :isShow="showDialog1" @dialogConfirm="dialogConfirm1" @dialogCancel="dialogCancel"
						content="确认提交审核？" cancelText="取消" confirmText="确定">
					</xbd-popup>
					<view class="foot">
						<button class="submit" @click="submit">提交审核</button>
					</view>
				</view>
				
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { Performance } from '@/api/index.js';
	export default {
		data() {
			return {
				id:'',
				windowHeight:0,
				showDialog:false,
				showDialog1:false,
				flag:true,
				showList:[],
				info:[],
			};
		},
		methods: {
			clickDel(id){
				this.id = id;
				this.showDialog = true;
			},
			dialogConfirm() {
				//弹出框确认操作
				this.showDialog = false;
				this.del(this.id);
				console.log("确认")
			},
			dialogConfirm1() {
				//弹出框确认操作
				this.showDialog1 = false;
				this.showList.forEach(item=>{
					this.info.push(item._id)
				})
				if(this.info.length === 0){
					uni.showToast({
							title: '无可提交内容！',
							icon: 'none',
						})
				}else{
					this.submitFill()
				}
				console.log(this.info)
				console.log("确认")
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
				this.showDialog1 = false;
			},
			// 删除填报单
			async del(id){
				console.log(id)
				const info = {
					id: id
				}
				try{
					const res = await Performance.postSaveDelete(info)
					this.showList = this.showList.filter(item=>{
						return item._id !== id
					})
					console.log(res)
				}catch(e){
				}
			},
			details(id) {
				console.log(id)
				uni.navigateTo({
					url: `./details?msg=2&id=${id}`,
				})
			},
			fillDetails(id){
				console.log('详情')
				uni.navigateTo({
					url: `./backfill?id=${id}&msg=1`,
				})
			},
			addFill(){
				console.log('新增填报')
				uni.navigateTo({
					url: `./form`,
				})
			},
			submit(){
				this.showDialog1 = true
				console.log('提交审核')
				console.log(this.showList)
			},
			async init(){
					try{
						const res = await Performance.getSaveList()
						console.log(res)
						this.showList = res.data.data.data
					}catch(e){
						//TODO handle the exception
					}
			},
			async submitFill(){
				let o={
					arr:this.info
				}
				if(this.flag)
					try{
						this.flag =false
						const res = await Performance.postSelfPerformance(o)
							
						if(res.data.success){
							if(res.data.code === 9527){
								this.$showToast('今日工作已提交，请勿重复填报！');
							}else{
								uni.showToast({
										title: '绩效提交成功！',
										icon: 'none',
									})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1000)
							}
						}
						
					}catch(e){
						this.flag = true
						console.log(e,'submitFill')
						//TODO handle the exception
					}
			}
			
		},
		onLoad() {
			uni.getSystemInfo({
				     success:(res) =>{
						 this.windowHeight = res.windowHeight
				         console.log(this.windowHeight);
				     }
				 });
		},
			
		onShow(){
			this.init()
		},
		onUnload() {
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 10rpx;
		position: relative;
		padding-right: 40rpx;
		box-sizing: border-box;
		.fill_add{
			display: flex;
			justify-content:flex-end;
			.add{
				font-size:28rpx;
				color: #1C7AEA;
				.add_image{
					vertical-align: sub;
					margin-right: 20rpx;
					height: 36rpx;
					width: 36rpx;
				}
			}
		}
		.swipe_right{
			display: flex;
			align-items: center;
			// margin: 40rpx;
			box-sizing: border-box;
			.swipe_image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.fill_card{
			margin-top: 20rpx;
		}
			
		.NoFill{
			   display: flex;
			   width: 750rpx;
			   margin-top: 180rpx;
			   flex-direction: column;
			   align-items:center;
			   justify-content:center;
			   color: #B7B5B5;
			   font-size: 28rpx;
			   // margin-right: 40rpx;
			.image{
				width: 280rpx;
				height: 240rpx;
			}
		}
		.foot {
			width: 750rpx;
			position: absolute;
			bottom: 100rpx;
			left: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
				.submit {
					width: 320rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}
			}
	}
</style>
